//由于webpack基于node构建的,所有webpack的配置本间中没任何合法的node代码都是支持的
var path = require('path')
//如果要配置插件,需要在导出的对象中挂在一个plugins
var htmlWebpackPlugin = require('html-webpack-plugin')

var VueLoaderPlugin = require('vue-loader/lib/plugin')
//当一命令行形式运行webpack或wenpack-dev-server的时候,工具会发现我们并没有提供要打包的文件的入口和出口文件
//此时他会检查项目根目录中的配置文件,并读取这个文件,就拿到了导出的这个配置对象,然后滚局这个对象,进行打包构建
module.exports = {
    entry: path.join(__dirname,'./src/main.js'),
    output:{
        path:path.join(__dirname,'./dist'),
        filename :'bundle.js'
    },
    plugins:[
        new htmlWebpackPlugin({
            template:path.join(__dirname,'./src/index.html'),
            filename: 'index.html'//设置申城的内存页面的名称
        }),
        new VueLoaderPlugin()
    ],
    module:{
        //配置第三方loader模块的
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader']},//处理css的
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},//处理less的
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},//处理sass的
            {test:/\.(jpg|png|git|bmp|jepg)$/,loader: 'url-loader'},//处理图片路径的loader
            {test: /\.(eot|svg|ttf|woff|woff2)$/,  loader: 'file-loader'},//字体文件
            {test: /\.js$/,use:'babel-loader',exclude:/node_modules/},//ES6的语法
            {test:/\.vue$/,use:'vue-loader'},//vue的template需要解析使用的
        ]
    },
    resolve:{
        alias:{
            "vue$":"vue/dist/vue.js"
        }
    }
}